<template>
  <div class="add-select-question">
    <h2 style="margin: 0 auto;margin-left: 45%;">录入单选题</h2>
    <!-- 表单 -->
    <form class="form1" @submit.prevent="submitQuestion">
      <!-- 题目 -->
      <div class="form-group">
        <label for="stem">题目:</label>
        <el-input id="stem" v-model="stem" type="text" required />
      </div>
      <!-- 分数 -->
      <div class="form-group">
        <label for="fraction">分数:</label>
        <el-input id="fraction" v-model.number="fraction" type="number" required />
      </div>
      <!-- 科目 -->
      <div class="form-group">
        <label for="subject">科目:</label>
        <el-input id="subject" v-model="subject" type="text" required />
      </div>
      <!-- 选项 -->
      <div class="form-group">
        <label for="a">选项A</label>
        <el-input v-model="a" type="text" />
      </div>
      <div style="margin-top: 3%">
        <label for="b">选项B</label>
        <el-input v-model="b" type="text" style="padding-bottom: 3%;" />
      </div>
      <div>
        <label for="c">选项C</label>
        <el-input v-model="c" type="text" style="padding-bottom: 3%;" />
      </div>
      <div>
        <label for="d">选项D</label>
        <el-input v-model="d" type="text" />
      </div>
      <!-- 正确选项 -->
      <div class="form-group">
        <label for="correctOption">正确选项:</label>
        <el-select v-model="answer">
          <el-option v-for="option in options" :key="option.value" :value="option.value">
            {{ option.text }}
          </el-option>
        </el-select>
      </div>
      <!-- 提交按钮 -->
      <el-button type="submit" @click="submitQuestion">录入题目</el-button>
    </form>
  </div>
</template>

<script>
import { submitQuestion } from '@/api/user'
export default {
  data() {
    return {
      stem: '',
      answer: '',
      fraction: 0,
      subject: '',
      a: '',
      b: '',
      c: '',
      d: '',
      questions: '单选题',
      options: [
        { value: 'A', text: 'A' },
        { value: 'B', text: 'B' },
        { value: 'C', text: 'C' },
        { value: 'D', text: 'D' }
      ]
    }
  },
  methods: {
    async submitQuestion() {
      console.log('Request:', this.user)
      const data = {
        stem: this.stem,
        fraction: this.fraction,
        subject: this.subject,
        answer: this.answer,
        a: this.a,
        b: this.b,
        c: this.c,
        d: this.d,
        questions: '单选题'
      }
      try {
        const response = await submitQuestion(data)
        console.log(response)
        // 处理响应
        console.log(response.data)
        console.log('传参成功')
      } catch (error) {
        // 处理错误
        console.error('Error:', error)
        console.log('错误')
      }
    }
  }
}
</script>

<style scoped>
/* 添加CSS样式 */
.form-group {
  margin-bottom: 15px;
}

.form1 {
  padding-top: 2%;
  width: 40%;
  margin: 0 auto;
  text-align: center;
}
</style>
